<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchShop" placeholder="店铺名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="$store.dispatch('getShopList',{shopName:searchShop})">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="shopVisible=true">添加店铺</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                v-loading="$store.state.load"
                :data="$store.state.shop.shopList"
                style="width: 100%">
            <el-table-column
                    label="创建时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺类别"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopTypeName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺图片"
                    width="180">
                <template slot-scope="scope">
                    <a :href="scope.row.shopPic | imgUrl" :title="scope.row.shopName" target="_blank">
                        <img height="60px" :src="scope.row.shopPic |imgUrl" alt="">
                    </a>
<!--                    <img height="100px" :src="scope.row.shopPic |imgUrl" alt="">-->
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="shopId=scope.row._id;shopTypeId=scope.row.shopTypeId;goodsTypeVisible=true">添加商品类别</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="shopInfo=scope.row;shopVisible=true">修改</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="$store.dispatch('deleteList',scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pageInfo action-name="getShopList" :params="{shopTypeName:searchShop}"></pageInfo>
        <ShioDiaLog v-if="shopVisible" :shopInfo="shopInfo"  :shopVisible.sync="shopVisible"></ShioDiaLog>

        <goods-dia-log v-if="goodsTypeVisible"
                       :shopId="shopId"
                       :shopTypeId="shopTypeId"
                       :goodsTypeVisible.sync="goodsTypeVisible"></goods-dia-log>
    </div>
</template>

<script>
    import ShioDiaLog from "@/components/DiaLogs/ShopDiaLog"
    import goodsDiaLog from "@/components/DiaLogs/goodsDiaLog"

    export default {
        name: "shopList",
        data(){
            return{
                shopInfo:{},
                shopId:"",
                shopTypeId:"",
                goodsTypeVisible:false,
                shopVisible:false,
                searchShop:""
            }

        },
            components:{
                ShioDiaLog,
                goodsDiaLog
            },

        mounted() {
            this.$store.dispatch("allShopTypeList")
        }
    }
</script>

<style scoped>

</style>